<template>
<div class="container">
    <div class="sider">
        <ul>
            <li>
                <svg class="icon" aria-hidden="true">
            <use :xlink:href="'#icon-yingyong'"></use>
          </svg> 文章
            </li>
            <li>活动</li>
            <li>订单</li>
            <li>投票</li>
            <li>表单</li>
        </ul>
    </div>
    <div class="content">
        <Row type="flex" :gutter="30">
            <Col span="6" v-for="item in 50" :key="item" style="padding-Bottom:30px;">
            <Card :dis-hover="true" :padding="0">
                <div class="aImg"></div>
                <div class="aTitle">这事标题这事标题这事标题这事标题这事标题</div>
                <div class="aToolbar">阅读：20</div>
            </Card>
            </Col>
        </Row>
    </div>
</div>
</template>

<script>
export default {
    name: 'yy',
    data() {
        return {
            msg: 'Welcome to Your Vue.js App'
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.icon {
    margin-right: 10px;
    font-size: 14px;
}

.sider ul li {
    height: 40px;
    line-height: 40px;
    padding: 0px 10px;
    cursor: pointer;
    font-family: '微软雅黑';
    font-size: 14px;
}

.sider ul li:hover {
    /*background-color: rgba(0,0,0,.05);*/
    color: #3c7ce6;
}

.aImg {
    width: 100%;
    height: 20vh;
    background-image: url('https://mmbiz.qpic.cn/mmbiz_png/GwJlTy7mqbII6KtqugQbo7NzG6YibNAQyo6gV2uAFKeNGS57Os3uf0icGYjD1ygBFob3s3zzxTlQ4VRmvSicOXM4w/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1');
}

.aTitle {
    padding: 0px 5px;
    height: 40px;
    line-height: 40px;
}

.aToolbar {
    padding: 5px;
    background-color: #f3f3f3;
    font-size: 12px;
}
</style>
